<template>
  <view class="appointmentDoctors-page">
    <NavBar title="选择医生" />

    <view class="dates">
      <view
        class="date-item"
        v-for="item in dates"
        :key="item.date"
        :class="{
          'date-item-active': item.date === selectedDate.date,
        }"
        @tap="handleSelectDate(item)"
      >
        <view class="date-item-name">{{ item.name }}</view>
        <text class="date-item-text">{{ item.format }}</text>
      </view>
    </view>

    <view class="list">
      <view
        class="list-item"
        v-for="item in appointmentStore.remainData[
          dayjs(selectedDate.date).format('YYYY-MM-DD')
        ] ?? []"
        :key="item.doctorId"
      >
        <view class="list-item-content">
          <!-- <view class="avatar"> </view> -->
          <Image class="avatar" :src="item.avatarUrl" />

          <view class="info">
            <view class="name">
              <text class="name-text">{{ item.doctorName }}</text>

              <text class="name-label">{{
                item.gender === "1" ? "男" : item.gender === "2" ? "女" : "未知"
              }}</text>
              <text class="name-label">{{ item.title }}</text>
            </view>

            <view class="desc">
              <text class="desc-text">{{ item.notes }}</text>
            </view>
          </view>
        </view>

        <view class="list-item-btns">
          <view class="date">
            <text class="time">{{
              dayjs(selectedDate.date).format("MM月DD日")
            }}</text>
          </view>

          <view class="source">
            <text class="text">剩余号源:{{ item.remainCount }}个</text>
          </view>

          <view
            class="btn"
            :class="{ 'btn-active': item.remainCount == 0 }"
            @tap="handleAppointment(item)"
          >
            <text class="btn-text">预约</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import Taro, { useReady, useRouter } from "@tarojs/taro";
import NavBar from "../../components/NavBar.vue";
import { ref } from "vue";
import { useAppointmentStore } from "../../stores/appointmentStore";
import { RemainListRes } from "types/appointment.type";

const router = useRouter();
const appointmentStore = useAppointmentStore();

const deptId = ref<number>();

// 当前日期前后 7 天
const dates = ref<
  {
    name: string; // 明天 周一 周二 周三 周四 周五 周六 周日
    date: number;
    format: string;
  }[]
>([]);
const dateNames = {
  Tomorrow: "明天",
  Monday: "周一",
  Tuesday: "周二",
  Wednesday: "周三",
  Thursday: "周四",
  Friday: "周五",
  Saturday: "周六",
  Sunday: "周日",
};

const selectedDate = ref<{
  name: string;
  date: number;
  format: string;
}>({
  name: "",
  date: 0,
  format: "",
});

const handleSelectDate = (item: {
  name: string;
  date: number;
  format: string;
}) => {
  selectedDate.value = item;

  appointmentStore.getRemainListApi({ deptId: deptId.value!, time: item.date });
};

// 预约
const handleAppointment = (item: RemainListRes) => {
  if (item.remainCount == 0) {
    return;
  }

  Taro.navigateTo({
    url: `/pages/appointmentDoctorInfo/appointmentDoctorInfo?doctorId=${item.doctorId}&deptId=${deptId.value}&date=${selectedDate.value.date}`,
  });
};

useReady(() => {
  if (router.params.deptId) {
    deptId.value = Number(router.params.deptId);
  }

  // 默认显示为明日，需同时显示月和日。显示最近7天，点击支持切换日期。
  dates.value = [
    {
      name: dateNames.Tomorrow,
      date: dayjs().add(1, "day").valueOf(),
      format: dayjs().add(1, "day").format("MM-DD"),
    },
    {
      name: dateNames[dayjs().add(2, "day").format("dddd")],
      date: dayjs().add(2, "day").valueOf(),
      format: dayjs().add(2, "day").format("MM-DD"),
    },
    {
      name: dateNames[dayjs().add(3, "day").format("dddd")],
      date: dayjs().add(3, "day").valueOf(),
      format: dayjs().add(3, "day").format("MM-DD"),
    },
    {
      name: dateNames[dayjs().add(4, "day").format("dddd")],
      date: dayjs().add(4, "day").valueOf(),
      format: dayjs().add(4, "day").format("MM-DD"),
    },
    {
      name: dateNames[dayjs().add(5, "day").format("dddd")],
      date: dayjs().add(5, "day").valueOf(),
      format: dayjs().add(5, "day").format("MM-DD"),
    },
    {
      name: dateNames[dayjs().add(6, "day").format("dddd")],
      date: dayjs().add(6, "day").valueOf(),
      format: dayjs().add(6, "day").format("MM-DD"),
    },
    {
      name: dateNames[dayjs().add(7, "day").format("dddd")],
      date: dayjs().add(7, "day").valueOf(),
      format: dayjs().add(7, "day").format("MM-DD"),
    },
  ];

  selectedDate.value = dates.value[0];

  appointmentStore.getRemainListApi({
    deptId: deptId.value!,
    time: selectedDate.value.date,
  });
});
</script>

<style lang="scss">
.appointmentDoctors-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #ffffff;

  .logo-container {
    flex-shrink: 0;
    width: 100%;

    .logo-container-inner {
      padding-top: 11px;
      padding-left: 16px;

      .close {
        width: 22px;
        height: 22px;
      }
    }
  }

  .dates {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    width: 100%;
    height: 75px;
    padding: 0px 16px;
    background: #ffffff;

    .date-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: 43px;
      height: 51px;
      background: #f7f8fc;
      border-radius: 4px;

      .date-item-name {
        font-weight: 400;
        font-size: 13px;
        color: #333333;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      .date-item-text {
        font-weight: 400;
        font-size: 13px;
        color: #333333;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      &.date-item-active {
        background: #16ada4;

        .date-item-name {
          color: #ffffff;
        }

        .date-item-text {
          color: #ffffff;
        }
      }
    }
  }

  .list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 16px;
    background: #f9f9f9;
    overflow-y: auto;

    .list-item {
      display: flex;
      flex-direction: column;
      width: 100%;
      // height: 131px;
      padding-top: 18px;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 12px;
      background: #ffffff;
      border-radius: 12px;

      .list-item-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;

        .avatar {
          flex-shrink: 0;
          width: 43px;
          height: 64px;
          border-radius: 4px;
          // background-color: #16ada4;
        }

        .info {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 4px;

          .name {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding-bottom: 5px;

            .name-text {
              font-weight: bold;
              font-size: 18px;
              color: #333333;
              line-height: 18px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .name-label {
              font-weight: 400;
              font-size: 13px;
              color: #777777;
              line-height: 13px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }

          .desc {
            width: 100%;

            .desc-text {
              width: 100%;
              height: 36px;
              font-weight: 400;
              font-size: 13px;
              color: #aaaaaa;
              text-align: left;
              font-style: normal;
              text-transform: none;
              // 最多显示两行
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }
        }
      }

      .list-item-btns {
        display: flex;
        align-items: center;
        width: 100%;
        padding-top: 10px;

        .date {
          .time {
            font-weight: 400;
            font-size: 13px;
            color: #777777;
            line-height: 13px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }

        .source {
          padding-left: 10px;

          .text {
            font-weight: 400;
            font-size: 13px;
            color: #777777;
            line-height: 13px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 70px;
          height: 28px;
          background: #16ada4;
          border-radius: 14px 14px 14px 14px;
          margin-left: auto;

          .btn-text {
            font-weight: 500;
            font-size: 13px;
            color: #ffffff;
            line-height: 13px;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }

          &.btn-active {
            background: #efefef;

            .btn-text {
              color: rgba(0, 0, 0, 0.3);
            }
          }
        }
      }
    }
  }
}
</style>
